<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
</head>
<body>
    <div id="app">
        <div :style="{fontSize:postFontSize + 'em'}">
            <blog-post v-for="post in list" :id = "post.id" :blog="post" 
            @enlarge-text="onEnlargetext" @narrow-text="postFontSize -= 0.1"></blog-post>
        </div>        
    </div>

    
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
        Vue.component('blog-post',{
            props:['blog'],
            template:
            // 反引号 随意换行不用自己排版 ES6新增写法
                `
                    <div>
                        <h3>{{blog.title}}</h3>
                        
                        <div v-html="blog.auther"></div>
                        <button @click="$emit('enlarge-text',0.1)">放大字体</button>
                        <button @click="$emit('narrow-text')">缩小字体</button>
                    </div>
                `            
        });
        var app = new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        id:1,
                        title:'将进酒',
                        auther:'<div style="color:red">李白</div>'                       
                    },
                    {
                        id:2,
                        title:'春眠',
                        auther:'杜甫'                         
                    },
                    {
                        id:3,
                        title:'送杜少府之任蜀州',
                        auther:'孟浩然'                        
                    }
                ],
                    postFontSize:2
            },
        methods:{
            onEnlargetext:function(enlargeAmount){
                this.postFontSize += enlargeAmount;
            }
        }
        })
    </script>
</body>
</html>